<!DOCTYPE html>
<meta charset="UTF-8">

<head>
  <script type="module" src="/build/app.esm.js"></script>
  <script>
    const script = document.querySelector('script[type=module]');
    script['data-opts'] = {
      syncQueue: true
    };
  </script>
  <script nomodule src="/build/app.js"></script>
</head>

<body>
  <button onclick="addApp()">Load app</button>
  <button onclick="removeApp()">Remove app</button>
  <button onclick="startUpdating()">Start updating</button>

  <script>
  function addApp() {
    const app = document.createElement('my-app');
    document.body.appendChild(app);
  }
  function removeApp() {
    const app = document.querySelector('my-app');
    if (app) {
      app.remove();
    }
  }
  function startUpdating() {
    let i = 0;
    setInterval(() => {
      const app = document.querySelector('my-app');
      app.offset = i++;
    }, 100);
  }
  </script>
</body>
